import React, { Component } from 'react'
import { Route } from 'react-router-dom'
import House from './House'
import Index from './Index/index'
import News from './News'
import Profile from './Profile'
import './index.scss'
import { TabBar } from 'antd-mobile'

const tabs = [
  { title: '首页', icon: 'icon-ind', path: '/home' },
  { title: '找房', icon: 'icon-findHouse', path: '/home/house' },
  { title: '资讯', icon: 'icon-infom', path: '/home/news' },
  { title: '我的', icon: 'icon-my', path: '/home/profile' },
]

export default class Home extends Component {
  state = {
    selectedTab: this.props.location.pathname,
  }

  //更新阶段
  componentDidUpdate(preProps) {
    // console.log(preProps.location.pathname, 24)
    // console.log(this.props.location.pathname, 24)
    if (preProps.location.pathname !== this.props.location.pathname) {
      this.setState({
        selectedTab: this.props.location.pathname,
      })
    }
  }

  render() {
    return (
      <div className="home">
        <Route exact path="/home" component={Index}></Route>
        <Route path="/home/house" component={House}></Route>
        <Route path="/home/news" component={News}></Route>
        <Route path="/home/profile" component={Profile}></Route>
        {/* 准备导航链接 */}
        <div className="tabBar">
          <TabBar unselectedTintColor=" #888" tintColor=" #21b97a">
            {tabs.map((item) => (
              <TabBar.Item
                title={item.title}
                key={item.title}
                icon={<span className={`iconfont ${item.icon}`}></span>}
                selectedIcon={<span className={`iconfont ${item.icon}`}></span>}
                selected={this.state.selectedTab === item.path}
                onPress={() => {
                  // this.setState({
                  //   selectedTab: item.path,
                  // })
                  this.props.history.push(item.path)
                }}
              ></TabBar.Item>
            ))}
          </TabBar>
        </div>
      </div>
    )
  }
}
